<template>
    <div>
        <el-dialog @close="closeDialog" :close-on-click-modal="false" title="设置商铺位置" style="text-align: left" :visible.sync="dialogFormVisible" width="60%">
            <div class="form-layer">
                <el-form label-width="100px" size="mini">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="获取定位">
                                <el-button type="primary" @click="fixedPos">重新定位</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item>
                                <div class="f-a-c">
                                    <el-input v-model="keyWords" placeholder="请输入地区" style="width: 230px;margin-right: 6px;"></el-input>
                                    <el-button type="primary" @click="setPlace" :disabled="!keyWords">查询</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="当前纬度">
                                <div>{{lat}}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="当前经度">
                                <div>{{lng}}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div id="map"></div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" type="primary" @click="btnSubmit()">确 认</el-button>
                    <el-button size="small" @click="closeDialog">取 消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>    
  </template>
  <script>
  import { updateDeptAddress } from "@/api/system/dept";
  export default {
    name: "mapView",
    props: {
        title: String,
        content: String,
        shopId: Number,
        longitude: Number,        
        latitude: Number,
        dialogShow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogFormVisible: this.dialogShow,
            map: null,
            local: null,
            mk: null,            
            lng: null,
            lat: null,
            keyWords: ''
        };
    },
    mounted(){
        this.lat = this.latitude;
        this.lng = this.longitude;
        this.mapdata();
    },
    watch: {
        dialogShow(val) {
            this.dialogFormVisible = val;
        }
    },
    methods: {
        async openDialog() {
            this.dialogFormVisible = true;
            this.initMap();
        },
        closeDialog() {
            this.$emit("dialogShowChange", false);
        },
        mapdata() {
            this.$nextTick(() => {
                this.map = new BMap.Map("map");
                let point = new BMap.Point(116.404, 39.915);                
                this.map.centerAndZoom(point, 12);
                this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
                this.map.addControl(new BMap.NavigationControl());
                this.fixedPos();
            });
        },
        // 点击定位-定位到当前位置
        fixedPos() {
            const _this = this;
            const geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {                    
                    _this.handleMarker(_this, r.point);
                    let myGeo = new BMap.Geocoder();
                    myGeo.getLocation(
                        new BMap.Point(r.point.lng, r.point.lat),
                        function (result) {
                            if (result) {
                                _this.lat = result.point.lat;
                                _this.lng = result.point.lng;
                            }
                        }
                    );
                } else {
                    _this.$message.error("failed" + this.getStatus());
                }
            });
        },
        // 搜索地址
        setPlace() {
            this.local = new BMap.LocalSearch(this.map, {
                onSearchComplete: this.searchPlace,
            });
            this.local.search(this.keyWords);
        },
        searchPlace() {
            if (this.local.getResults() != undefined) {
            this.map.clearOverlays(); //清除地图上所有覆盖物
            if (this.local.getResults().getPoi(0)) {
                let point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                this.map.centerAndZoom(point, 18);
                this.handleMarker(this, point);                
                this.lat = point.lat;
                this.lng = point.lng;
            } else {
                this.$message.error("未匹配到地点!");
            }
            } else {
                this.$message.error("未找到搜索结果!");
            }
        },
        // 设置标注
        handleMarker(obj, point) {
            let that = this;
            obj.mk = new BMap.Marker(point);
            obj.map.addOverlay(obj.mk);
            obj.mk.enableDragging(); // 可拖拽
            obj.mk.addEventListener("dragend", function (e) {                
                // 监听标注的拖拽，获取拖拽后的经纬度
                that.lat = e.point.lat;
                that.lng = e.point.lng;
            });
            obj.map.panTo(point);
        },
        // 确认
        btnSubmit() {
            if (this.shopId != undefined) {
              let param = {deptId: this.shopId, longitude: this.lng, latitude: this.lat, address: this.keyWords};  
              updateDeptAddress(param).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.dialogFormVisible = false;
              });
            }
        },
    }
  }
</script>
<style scoped>
.form-layer {
    width: 100%;
}
#map {
    margin-top: 0px;
    width: 100%;
    height: 300px;
    border: 1px solid gray;
    box-sizing: border-box;
    overflow: hidden;
}
</style>